import { Component } from 'react';
import RoomItem from '../../components/roomItem';
import HomeCss from './index.module.css'
import Loading from '../../components/Loading/loading';
import bus from '../../utils/bus';
class Home extends Component {
    state = {
        roomList: [],
        offset:0,
        isLoading:false
    }
    render() {
        let {roomList,isLoading} = this.state;
        return (
            <div>
                <div className={HomeCss.roomList}>
                {
                    roomList.map((item,index)=>{
                        return <RoomItem key={index} roomItem={item}/>
                    })
                }
            </div>
            <div>
                {
                    isLoading && <Loading/>
                }
            </div>
            </div>
        )
    }
    componentDidMount() {
        bus.emit("sendTitle","首页")
        this.getDataList();
        // 监听滚动事件
        window.onscroll = this.pageScroll.bind(this);
    }
    pageScroll(){
        let {offset} = this.state;
        // 获取内容总高度
        let scrollHeight = document.documentElement.scrollHeight;
        // 获取浏览器高度
        let clineHeight = document.documentElement.clientHeight;
        // 获取滚动高度
        let scrollTop = document.documentElement.scrollTop;
        console.log(scrollHeight,clineHeight,scrollTop)
        if(scrollHeight-clineHeight-scrollTop<=0){
            console.log("滚动到底部啦")
            offset+=20;
            this.setState({
                offset:offset
            },()=>{
              this.getDataList();  
            })
        }
    }
    // 获取列表数据
    getDataList(){
        let {offset,roomList,isLoading} = this.state;
        if(isLoading){
            return
        }
        this.setState({
            isLoading:true
        })
        this.$axios.get(`/douyu/api/RoomApi/live?offset=${offset}&limit=20`).then(res => {
            this.setState({
                roomList: [...roomList,...res.data.data],
                isLoading:false
            })
        })
    }
}
export default Home